<template>
    <div class="login">
        <div class="box">
            <h1>登录</h1>
            <div class="input">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="ruleForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="ruleForm.password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import {LoginInfo} from '@/api/login.js';
    export default {
        data(){
            return{
                ruleForm: {
                    username: '',
                    password:''
                },
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                    ],
                    password:[
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
                    ]
                }
            }
        },
        methods:{
            goLogin(){
                console.log(this.username,this.password);
                if(this.regexp.test(this.username)){
                    console.log('成功')
                }else{
                    this.UserShow = true;
                }
                if(this.regexp.test(this.password)){
                    console.log('成功')
                }else{
                    this.PassShow = true;
                }
            },
            submitForm(formName) {
                console.log(formName);//ruleForm
                this.$refs[formName].validate(async (valid)=>{//formName表示当前的dom元素 validate对表单进行校验 返回布尔值
                    if(valid){//如果返回true
                        console.log('成功');
                        console.log(this.ruleForm.username,this.ruleForm.password);
                        const result = await LoginInfo({
                            method:'post',
                            url:'login',
                            data:this.ruleForm,
                            headers:'application/x-www-form-urlencoded;charset=utf-8'
                        })
                        console.log(result);
                        if(result.meta.msg == '登录成功'){
                            window.sessionStorage.setItem('token',result.data.token);
                            this.$router.push('/home');
                        }
                    }else{
                        console.log('失败')
                    }
                })
            },
            resetForm(formName) {//formName表示当前的dom元素
                this.$refs[formName].resetFields();//this.$refs[formName]表示可以获取到dom元素 resetFields对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
            }
        }
    }
</script>

<style lang="scss" scoped>
.login{
    width:100%;
    height:100%;
    background-image:linear-gradient(to left,#fd79a8, #a29bfe);
    display: flex;
    justify-content: center;
    align-items: center;
    .box{
        width:300px;
        height:350px;
        background-color: white;
        border-radius:30px;
        padding:10px;
        h1{
            font-size:30px;
            text-align:center;
            margin:20px 0;
        }
        .input{
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>